<template>
  <a-table :columns="columns" :data-source="tabledata" :loading="loading" @change="onClickPagination" :pagination="pagination">
    <!-- 应用图标 -->
    <template #iconPath="{ text }">
      <div class="d-img">
        <img :src="text" />
      </div>
    </template>
    <!-- 证书池 -->
    <template #accountPool="{ text, record,index }">
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          {{ text }}
          <DownOutlined />
        </a>
        <template v-slot:overlay>
          <a-menu>
            <a-menu-item key="0" @click="onCerPool(text, record, index,'公有池')">
              公有池
            </a-menu-item>
            <a-menu-item key="1" @click="onCerPool(text, record,index, '私有池')">
              私有池
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
    <!-- 下载地址 -->
    <template #lid="{ text, record }">
      <div>
        <a-button type="link" @click="onClickDownload(text, record)">
          下载地址
        </a-button>
      </div>
    </template>
    <!-- 时间格式化 -->
    <template #time="{ text }">
      <div>
        {{ FormatTime(text) }}
      </div>
    </template>
    <!-- 操作 -->
    <template #operating="{ record ,index}">
      <a-button type="primary" @click="onClickDetails(record,index)"> 详情 </a-button>
      <a-popconfirm title="您确定要删除此应用吗?" ok-text="是" cancel-text="否" @confirm="onClickDelete(record,index)">
        <a-button type="danger"> 删除 </a-button>
      </a-popconfirm>
    </template>
  </a-table>
  <Drawer :visible="visible" :drawerdata="drawerdata" @onCloseDrawer="onCloseDrawer" v-if="visible" />
  <Modal :url="url" :modalVisible="modalVisible" :name="name" :img="img" :size="size" @oncancel="oncancel" v-if="modalVisible" />
</template>
<script lang='ts'>
import { reactive, SetupContext, toRefs, watch } from "vue";
import { QrurlType, TabledataInterface } from "@/CommonAssets/index";
import { DownOutlined } from "@/components/AntDesign/icons/icons";
import { $message } from "../AntDesign/message";
import { delsuper, upsuper } from "@/api/superApi";
import Drawer from "./Modal/Drawer.vue";
import { FormatTime } from "@/CommonAssets/index";
import createStore from "@/store/index";
import { delapk, upapk } from "@/api/apkApi";
import { delipa, upipa } from "@/api/ipaApi";
import Modal from "@/components/Table/Modal/Modal.vue";
import { getdnsone } from "@/api/dnsApi";
import { delmiao, upmiao } from "@/api/miaoApi";
interface datasTypes {
  visible: boolean;
  drawerdata: TabledataInterface;
}
export default {
  components: {
    DownOutlined,
    Drawer,
    Modal,
  },
  props: {
    columns: {
      type: Array,
      default: [],
    },
    tabledata: {
      type: Array,
      default: [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pagination: Object,
    typeEnum: String,
  },
  emits: [
    "onClickDownload",
    "onClickPagination",
    "onClickupdate",
    "onClickDelete",
  ],
  setup(props: any, ctx: SetupContext) {
    const datas = reactive({
      visible: false,
      drawerdata: {},
    } as datasTypes);

    const qrurl = reactive({
      modalVisible: false,
      url: "",
      name: "",
      img: "",
      size: "",
    } as QrurlType);

    /* 下载地址事件 */
    async function onClickDownload(
      text: string,
      record: TabledataInterface,
      index: number
    ) {
      const result = await getdnsone({
        id: JSON.parse(localStorage.getItem("userdata") as string).userid,
      });
      qrurl.url = result.data
        ? `http://${result.data.dns}/${text}`
        : `${(window as any).$URL as string}/${text}`;
      qrurl.img = record.iconPath;
      qrurl.name = record.remarks;
      qrurl.size = record.appSize;
      qrurl.modalVisible = true;
    }

    /* 关闭下载链接弹窗 */
    function oncancel(val: boolean) {
      qrurl.modalVisible = val;
    }

    /* 分页事件 */
    function onClickPagination(value: {
      current: number;
      pageSize: number;
      total: number;
    }) {
      ctx.emit("onClickPagination", value.current);
    }

    /* 修改应用数据*/
    const UpSuperData = async (data: {
      id: string;
      index: number;
      accountPool: string;
    }) => {
      try {
        let res: any;
        switch (props.typeEnum) {
          case "apkModel":
            res = await upapk(data);
            break;
          case "iosModel":
            res = await upipa(data);
            break;
          case "superModel":
            res = await upsuper(data);
            break;
          case "miaoModel":
            res = await upmiao(data);
            break;
        }
        $message("success", res.data.message);
        ctx.emit("onClickupdate", {
          index: data.index,
          accountPool: data.accountPool,
        });
      } catch (error) {
        $message("error", error.data.message);
      }
    };

    /* 证书池事件 */
    async function onCerPool(
      text: string,
      record: TabledataInterface,
      index: number,
      Pool: string
    ) {
      UpSuperData({ id: record._id, accountPool: Pool, index });
    }

    /* 点击详情事件 */
    function onClickDetails(record: TabledataInterface, index: number) {
      datas.visible = true;
      datas.drawerdata = record;
      datas.drawerdata.index = index;
    }
    /* 关闭抽屉 */
    function onCloseDrawer() {
      datas.visible = false;
    }

    /* 点击删除事件 */
    async function onClickDelete(record: TabledataInterface, index: number) {
      console.log(props.typeEnum);

      try {
        switch (props.typeEnum) {
          case "apkModel":
            await delapk({ id: record._id });
            break;
          case "iosModel":
            await delipa({ id: record._id });
            break;
          case "superModel":
            await delsuper({ id: record._id });
            break;
          case "miaoModel":
            await delmiao({ id: record._id });
            break;
        }
        ctx.emit("onClickDelete", index);
        $message("success", "删除成功");
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 监听应用合并刷新页面 */
    watch(
      () => createStore.state.mergeData,
      (count, prevCount) => {
        ctx.emit("onClickupdate", count);
      }
    );

    return {
      ...toRefs(datas),
      ...toRefs(qrurl),
      oncancel,
      onClickDownload,
      onClickPagination,
      onClickDetails,
      onClickDelete,
      onCloseDrawer,
      FormatTime,
      onCerPool,
    };
  },
};
</script>

<style lang="less" scoped>
.d-img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 0px 9px 2px #d0cdcd;
  img {
    width: 100%;
  }
}
.ant-dropdown-link {
  color: #000;
}
.ant-btn {
  margin-right: 8px;
}
</style>
